<template>
  <div class="main-div">
    <div class="search-div">
      <el-form
        :inline="true"
        :model="queryParam"
        class="demo-form-inline"
      >
        <el-form-item label="角色编码:">
          <el-input
            v-model="queryParam.roleCode"
            class="text-input"
            placeholder="请输入角色编码"
            prefix-icon="el-icon-search"
          />
        </el-form-item>
        <el-form-item label="角色名称:">
          <el-input
            v-model="queryParam.roleName"
            class="text-input"
            placeholder="请输入角色名称"
            prefix-icon="el-icon-search"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="onSubmit"
          >
            查询
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <div>
      <div class="main-table">
        <el-table
          ref="multipleTable"
          :data="pageInfo.records"
          tooltip-effect="dark"
          border
          style="width: 100%"
        >
          <el-table-column
            prop="roleCode"
            label="角色编码"
            width="100"
          />
          <el-table-column
            prop="roleName"
            label="角色名称"
          />
          <el-table-column
            prop="roleDesc"
            label="角色描述"
            width="180"
          />
          <el-table-column
            prop="createTime"
            label="创建时间"
          />
          <el-table-column
            prop="updateTime"
            label="修改时间"
          />

          <el-table-column
            fixed="right"
            label="操作"
          >
            <template slot-scope="scope">
              <el-button
                type="primary"
                size="small"
                @click="handleEditClick(scope.row)"
              >
                修改权限
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--分页-->
        <el-pagination
          class="margin-top"
          small
          background
          layout="prev, pager, next"
          :total="pageInfo.total"
          :page-size="pageInfo.size"
          :current-page="pageInfo.current"
          @current-change="handlePageChange"
          @next-click="handlePageChange"
          @prev-click="handlePageChange"
        />
      </div>
    </div>

    <div>
      <el-dialog
        :title="saveFlag==='edit'?'修改权限':'修改权限'"
        :visible.sync="dialogVisible"
        :close-on-click-modal="false"
        width="70%"
      >
        <div>
          <el-tree
            :props="{
              key: 'powerId',
              label: 'powerName'
            }"
            :data="powerTree"
            node-key="powerId"
            show-checkbox
            :default-expanded-keys="hasPower"
            :default-checked-keys="hasPower"
            @check-change="handleCheckChange"
          />
          <!--          <el-transfer v-model="value" :data="data"></el-transfer>-->
        </div>
        <span
          slot="footer"
          class="dialog-footer"
        >
          <el-button
            type="primary"
            @click="save"
          >保 存</el-button>
          <el-button @click="dialogVisible = false">取 消</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
  import {mapGetters} from 'vuex'
  import {listRole} from '../../api/manager/role'
  import {powerByRole, modifyPower} from '../../api/manager/power'
  import {removeItem} from '../../utils/utils'

  export default {
    name: 'Role',
    data () {
      return {
        viewDialogVisible: false,
        dialogVisible: false,
        saveFlag: 'add',
        pageInfo: {
          size: 10,
          current: 1,
          total: 0
        },
        queryParam: {
        },
        currentRole: {},
        // 显示dialog绑定值
        saveObject: [],
        powerTree: [],
        hasPower: [],

      }
    },
    created () {
      this.loadData()
    },
    computed: {
      ...mapGetters([
        'wsMsg'
      ])
    },
    watch: {
      // 监测 wsMsg
      wsMsg: function (msg) {

      }
    },
    methods: {
      // 初始查询
      loadData () {

        let queryPage = {
          pageInfo: {
            pageSize: this.pageInfo.size,
            current: this.pageInfo.current,
          },
          queryParam: this.queryParam
        }
        // 初始查询数据
        listRole(queryPage).then(res => {
          this.pageInfo = res
        })
      },
      onSubmit () {
        this.loadData()
      },
      openCreateDialog () {
        this.dialogVisible = true
      },
      // 操作选中方法
      toggleSelection (rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row)
          })
        } else {
          // 为空则清空
          this.$refs.multipleTable.clearSelection()
        }
      },
      handlePageChange (current) {
        this.pageInfo.current = current
        this.loadData()
      },
      handleEditClick (row) {
        this.saveFlag = 'edit'
        powerByRole(row).then(result => {
          this.powerTree = result.powerTree
          this.hasPower = result.hasPower.slice()
          this.saveObject = result.hasPower.slice()
        })
        this.dialogVisible = true
        this.currentRole = row;
      },
      save () {
        // 根据saveObject 数组和没修改之前的数据hasPower进行比较处理出需要修改和删除的权限
        let removePower = [];
        // 复制新的数组不改变原数组
        let addPower = this.saveObject.slice();
        for (let i = 0; i < this.hasPower.length; i++) {
            // 如果需要保存的数组不包含原有权限元素，则该权限元素加入删除列表
            if (!this.saveObject.includes(this.hasPower[i])) {
                removePower.push(this.hasPower[i])
            }

            //  如果需要保存的数组包含原有权限元素，则该权限元素从新增列表删除 （即新增列表只剩下要保存且原权限没有的数据）
            if (addPower.includes(this.hasPower[i])) {
                addPower = removeItem(addPower, this.hasPower[i])
            }
        }
        let rolePojo = {};
          rolePojo = this.currentRole;
          console.log(JSON.stringify(rolePojo), JSON.stringify(addPower), JSON.stringify(removePower));
        modifyPower({rolePojo, addPower, removePower}).then(res => {
          this.$message.success('修改完成,处理了 ' + res + ' 条权限数据')
        })

        this.dialogVisible = false

      },
      handleCheckChange (data, checked, indeterminate) {
        if (checked) {
          this.saveObject.push(data.powerId)
        } else {
          this.saveObject = removeItem(this.saveObject, data.powerId)
        }
      },
    }
  }
</script>

<style>
  .dashboard-container .el-dialog__header {
    border-bottom: 1px solid #dedede;
  }

  .dashboard-container .el-dialog__title {
    font-size: 16px;
    color: #333;
  }
</style>
<style scoped lang="scss">

  .main-div {
    padding: 20px 0 0 30px;

    .main-table {
      width: 100%;
      position: relative;
      height: 1200px;
      display: inline-block;
      vertical-align: top;
      border-radius: 5px;

      .hide-point-div {
        border-radius: 5px;
        width: 16px;
        height: 16px;
        z-index: 999;
        position: absolute;
      }

      .main-table-div {
        border-radius: 15px;
        border: 3px solid #3a5063;
        margin: 16px;
        padding: 16px;
        display: flex;
        position: relative;
        z-index: 1000;
        left: 100px;

        .link-left-node-div {
          width: 16px;
          height: 16px;
          background-color: #123456;
          position: absolute;
          right: 0px;
          top: 57px;
          z-index: 1000;
        }
      }

      .assist-table-div {
        border-radius: 15px;
        display: flex;
      }

      .float-table-div {
        margin-right: 10px;
        font-size: 12px;
        height: 100%;

        .btn-pos {
          border: 1px solid #99a9bf;
          background-color: #409EFF;
          color: #034460;
        }

      }

      .float-link-div {
        width: 10px;
        height: 100%;
        z-index: 1000;

        .link-right-node-div {
          top: 50%;
          margin-left: -16px;
          margin-top: 45px;
          height: 16px;
          width: 16px;
          background: #123456;
          z-index: 1000;
        }
      }
    }
  }

  .main-master {
    width: 50%;
    float: left;
    margin: 20px;
  }

  .main-all-master {
    float: left;
  }

  .main-dependent {
    float: left;
    border: 1px;
    box-sizing: border-box;
  }

  .main-all-dependent {
    float: left;
  }

  .text-input {
    width: 180px;
  }

  .tableInfo-div {
    height: 480px;
    overflow: auto;
  }

  .search-div {
  }

</style>
